import { ElementRef, Directive,  AfterViewChecked, NgZone } from '@angular/core';
import { fromEvent } from 'rxjs';

@Directive({
    selector: '[appSetHeight]'
})
export class SetHeightDirective implements  AfterViewChecked{
    private headerH:number = 126;
    private footerdH:number = 97;
    
    constructor(
        private el: ElementRef,
        private ngZone: NgZone
    ) { 
            this.el = el;
        fromEvent(window, 'resize').subscribe((event) => {
            let bodyH = this.el.nativeElement.clientHeight + this.headerH + this.footerdH ;
            let outSize = window.innerHeight - bodyH;
            // console.log(outSize)
        });
    };
    
    ngAfterViewChecked(){
        // console.log(this.el.nativeElement.style.height,' = height')
        if(this.el.nativeElement.style.height){
            this.el.nativeElement.style.height='';
        };
        // console.log(window.innerHeight - bodyH,' = window.innerHeight')
        let elH = this.el.nativeElement.clientHeight;
        // console.log(elH,' = window.innerHeight')
        let bodyH = this.el.nativeElement.clientHeight + this.headerH + this.footerdH ;
        let outSize = window.innerHeight - bodyH;
        let changeSize = this.el.nativeElement.clientHeight + outSize;
                if(outSize>=0){
                    this.el.nativeElement.style.height =  changeSize + 'px';
                }else{
                    this.el.nativeElement.style.height = elH + 'px';
                };
        // this.ngZone.runOutsideAngular(() => {
        //     setTimeout(() => {
        //     //   console.log(elH);
        //     }, 1000);
        //   });
    };

 
    
};

